<template>
  <div class='com-selectBox'>
    <div class='com-sContent' @click='selectToggle'>
        <div class='com-sTxt'>{{nowText}}</div>
        <img src='../assets/down@2x.png'  class='com-sImg'></img>
    </div>
    <div class='com-sList' v-if="selectShow">
        <div v-for="item in propArray" class='com-sItem' @click='setText(item)'>{{item}}</div>
    </div>
</div>
</template>

<script>
export default {
  name: 'Select',
  props: {
    propArray: Array,
    value: String
  },
  data() {
    return {
      selectShow: false,//初始option不显示
      nowText: "请选择...",//初始内容
    }
  },
  methods: {
    selectToggle: function () {
      this.selectShow = !this.selectShow
    },
    setText: function (e) {
      this.selectShow = false
      this.nowText = e
      this.$emit('input', e)
    }
  }
}
</script>

<style lang="scss">
.com-selectBox{
    width: 100%;
    position: relative
}
.com-sContent{
    background: #f6f6f6;
    font-size: 28px;
    position: relative;
    height: 80px;
    line-height: 80px;
}
.com-sImg{
    position: absolute;
    right: 20px;
    top: 30px;
    width: 25px;
    height: 20px;
}
.com-sTxt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 40px 0 20px;
    font-size: 28px;
}
.com-sList{
    background: white;
    width: 100%;
    border: 1px solid #e2e2e2;
    border-top: none;
    box-sizing: border-box;
    z-index: 3;
}
.com-sItem{
    height: 60px;
    line-height: 60px;
    width: calc(100% - 40px);
    padding: 10px 20px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 28px;
}
.com-sItem:first-child{
    border-top: none;
}
</style>